<template>
  <div>
    <div class="header">
      <div class="b">
        <img src="img/zjt.png" @click="fun()" />
      </div>
      <div class="b">
        <img src="img/sousuo.png" />
      </div>
      <div class="b">
        <img src="img/more.png" />
      </div>
    </div>
    <van-swipe @change="onChange" autoplay="3000">
      <van-swipe-item v-for="(v,i) in this.newarr[0].data[0].data[0].imga" :key="i">
        <img :src="v.img" alt />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/{{newarr[0].data[0].data[0].imga.length}}</div>
      </template>
    </van-swipe>

    <div class="priceTab">
      <p>
        <span>￥</span>
        {{this.newarr[0].data[0].price}}
      </p>
      <span class="tj">特价</span>
      <img
        src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/product/icon_product_unfavor.png"
      />
    </div>

    <div class="content">
      <p>{{this.newarr[0].data[0].content}}</p>
    </div>

    <van-sku
      v-model="showBase"
      :sku="sku"
      :goods="goods_info"
      :goods-id="goods_id"
      :hide-stock="sku.hide_stock"
      :quota="quota"
      :quota-used="quota_used"
      :initial-sku="initialSku"
      reset-stepper-on-hide
      reset-selected-sku-on-hide
      disable-stepper-input
      :close-on-click-overlay="closeOnClickOverlay"
      :custom-sku-validator="customSkuValidator"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
    <!-- disable-stepper-input  数字框左右的数字框可以按 里面的数字不能手动输入 -->

    <van-goods-action>
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-button
        color="rgb(221, 177, 81)"
        type="warning"
        text="加入购物车"
        @click="showBase = !showBase"
      />
      <van-goods-action-button
        color="rgb(255, 66, 66)"
        type="danger"
        text="立即购买"
        @click="showBase = !showBase"
      />
    </van-goods-action>

    <!-- ------------------- -->

    <div class="yufu">
      <div>预付流程</div>
      <div>1.付订金 - 2.付尾款 - 3.发货</div>
      <img src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/icons/icon_tip_black.png" />
    </div>

    <div class="yufu">
      <div>支付尾款</div>
      <div>10月31日 20:00 - 11月3日 23:59</div>
    </div>

    <div class="double">双11预售火热开启，爆款好物全年底价，预售100抵700，抢1111元大额神券</div>

    <img
      src="https://img.youpin.mi-img.com/youpinoper/dfae4d83b02472999fcd224ae1b41935.png?w=996&h=108"
      class="juan"
    />

    <!-- {{this.sku.list}} -->
  </div>
</template>

<script>
export default {
  created() {
    window.addEventListener("beforeunload", () => {
      localStorage.setItem("stateInfo", JSON.stringify(this.$store.state));
    });
    if (localStorage.getItem("stateInfo")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(localStorage.getItem("stateInfo"))
        )
      );
    }

    this.xiangqing = this.$route.query.newsid;
    this.arr = this.$store.state.details.arr;
    this.newarr = this.arr.filter(v => {
      if (v.id == this.xiangqing) {
        return v;
      }
    });
    this.xiangqing = this.$route.query.newsid;

    console.log("对应详情页内容");
    console.log(this.newarr[0].data[0]); // 对应的详情页数据

    this.sku.list = this.newarr[0].data[0].data[0].price.map(item => {
      return {
        price: item.price
      };
    });

    console.log(this.sku.list[0].price);

    this.sku.tree[0].v = this.newarr[0].data[0].data[0].xinghao.map(item => {
      return {
        name: item.xinghao
      };
    });
  },

  data() {
    return {
      current: 0,
      xiangqing: "",
      arr: [],
      newarr: [],

      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色",
            k_id: "1",
            v: [
              {
                id: "30349",
                name: "深蓝",
                imgUrl: ""
              },
              {
                id: "1215",
                name: "白色"
              },
              {
                id: "30341",
                name: "黑色",
                imgUrl: ""
              }
            ],
            k_s: "s1",
            count: 2
          },
          {
            k: "尺寸",
            k_id: "2",
            v: [
              {
                id: "1193",
                name: "1"
              },
              {
                id: "1194",
                name: "2"
              }
            ],
            k_s: "s2",
            count: 2
          }
        ],
        // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
        list: [
          {
            id: 2259,
            price: 34900, //价格
            discount: 122,
            s1: "1215",
            s2: "1193",
            s3: "",
            s4: "0",
            s5: "0",
            stock_num: 20, //库存
            goods_id: 946755
          },
          {
            id: 2260,
            price: 34900,
            discount: 112,
            s1: "1215",
            s2: "1194",
            s3: "0",
            s4: "0",
            s5: "0",
            stock_num: 2, //库存
            goods_id: 946755
          },
          {
            id: 2257,
            price: 34900,
            discount: 132,
            s1: "30349",
            s2: "1193",
            s3: "0",
            s4: "0",
            s5: "0",
            stock_num: 40, //库存
            goods_id: 946755
          },
        ],
        price: "349.00", //？？
        stock_num: 999, // 商品总库存？？
        none_sku: false, // 是否无规格商品 false正常显示那些可供选择的标准，此处是颜色和尺寸
        hide_stock: false // 是否隐藏剩余库存 false正常显示剩余多少件的那个库存
      },
      goods_id: "946755",
      quota: 9, //限购数量 库存旁边显示限购数
      quota_used: 0, //已经购买过的数量 和下方的数字选择框显示不一样 与限购数量是相对应的 0数字选择框显示3   1 -- 2   2 -- 1  3 -- 0
      goods_info: {
        title: "测试商品A",
        picture:
          "https://res.youpin.mi-img.com/youpin_gms/d240eb24_0da7_4ce4_9ced_26a07cd57687.png?w=800&h=800" //图片这个我有点混乱
      },
      initialSku: {
        s1: "0001",
        s2: "1001",
        selectedNum: 1
      },
      showBase: false, //sku的框的显示
      showCustom: false,
      showStepper: false,
      showSoldout: false,
      closeOnClickOverlay: true, //点击空白处关闭购物框

      customSkuValidator: () => "请选择颜色或尺寸!" //？？
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    fun() {
      this.$router.go(-1);
    },
    onBuyClicked(sku) {
      this.$toast("buy:" + JSON.stringify(sku));
      console.log(JSON.stringify(sku));
    },

    onAddCartClicked(sku) {
      this.$toast("add cart:" + JSON.stringify(sku));
    }
  },
  filters: {
    wh(data) {
      if (data.length >= 20) {
        return data.substr(0, 20) + "...";
      } else {
        return data;
      }
    }
  }
};
</script>

<style scoped>
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  color: aliceblue;
  background: rgba(0, 0, 0, 0.1);
}
.van-swipe {
  width: 100%;
  height: 3.75rem;
}
.van-swipe-item img {
  width: 100%;
  height: 3.75rem;
}
.priceTab {
  width: 100%;
  height: 0.34rem;
  margin-top: 0.09rem;
  display: flex;
  justify-content: space-between;
}
.priceTab p {
  font-size: 0.26rem;
  color: rgb(153, 98, 26);
  font-weight: 500;
  margin-left: 0.1rem;
  margin-top: 0rem;
  line-height: 0.34rem;
}
.priceTab p span {
  font-size: 0.16rem;
}
.priceTab .tj {
  background-color: rgb(255, 255, 255);
  font-size: 0.08rem;
  border: 1px solid rgb(153, 98, 26);
  border-radius: 0.03rem;
  width: 0.28rem;
  height: 0.16rem;
  color: rgb(153, 98, 26);
  padding: 0 0.05rem;
  margin-left: -2rem;
  margin-top: 0.04rem;
  transform: scale(0.8);
  text-indent: 0.02rem;
}
.priceTab img {
  width: 0.4rem;
  height: 0.4rem;
}
.content {
  width: 100%;
  height: 0.35rem;
  /* background-color: brown; */
}
.content p {
  font-size: 0.16rem;
  font-weight: 600;
  line-height: 0.35rem;
  text-indent: 0.1rem;
}
.header {
  position: absolute;
  z-index: 2;
  display: flex;
  justify-content: space-evenly;
}
.header img {
  width: 0.32rem;
  height: 0.32rem;
}
.header .b {
  width: 0.32rem;
  height: 0.32rem;
  background-color: gray;
  opacity: 0.4;
  border-radius: 50%;
  margin-top: 0.1rem;
}
.header .b:nth-child(1) {
  margin-left: 0.2rem;
}
.header .b:nth-child(2) {
  margin-left: 2.2rem;
}
.header .b:nth-child(3) {
  margin-left: 0.2rem;
}

.van-goods-action-icon {
  font-weight: 700;
}

.yufu {
  width: 100%;
  height: 0.24rem;
  display: flex;
}
.yufu div {
  font-size: 0.14rem;
  font-weight: 500;
  line-height: 0.24rem;
  margin-left: 0.1rem;
  color: rgba(0, 0, 0, 0.8);
}
.yufu img {
  width: 0.13rem;
  height: 0.13rem;
  margin-top: 0.05rem;
  margin-left: 0.02rem;
}
.double {
  color: rgb(133, 133, 133);
  font-size: 0.13rem;
  margin-top: 0.1rem;
  margin-left: 0.1rem;
}
.juan {
  width: 100%;
  margin-top: 0.1rem;
}
</style>